<!-- 查询包租佬电费查询 -->
<template>
	<el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="90%">
		<ContentWrap>
			<!-- 搜索工作栏 -->
			<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="218px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="包租佬、民一电表——时间区间">
							<el-date-picker v-model="queryParams.dateScope" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item>
							<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="宏新能源电表——页码">
							<el-input v-model="queryParams.pageNo" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item>
							<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</ContentWrap>

		<!-- 列表 -->
		<ContentWrap>
			<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
				<el-table-column label="订单号" align="left" prop="orderId" width="300" />
				<el-table-column label="充值金额" align="center" prop="moneyOld" width="210" />
				<el-table-column label="充值后" align="center" prop="money" width="100" />
				<el-table-column label="充值时间" align="center" prop="rechargeTime" />
			</el-table>
		</ContentWrap>
	</el-drawer>
</template>
<script lang="ts" setup>
	import { geMeterRecharges } from '@/api/zwsj/meter'
	import { formatDate } from '@/utils/formatTime'

	defineOptions({ name: 'FactoryChargeQuery' })

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const loading = ref(true) // 列表的加载中
	const list = ref() // 列表的数据

	const queryParams = reactive({
		id: undefined,
		pageNo: 1,
		dateScope: undefined,
	})

	/** 打开弹窗 */
	const meterIdRef = ref<number>() // 搜索的表单
	const open = async (meterId: number) => {
		loading.value = false
		dialogVisible.value = true
		dialogTitle.value = '厂家电表系统-充值查询'
		meterIdRef.value = meterId
		queryParams.id = meterId
		const currDate = new Date()
		let subDate = new Date()
		subDate.setDate(subDate.getDate() - 7)
		queryParams.dateScope = [formatDate(subDate, 'YYYY-MM-DD'), formatDate(currDate, 'YYYY-MM-DD')]
		handleQuery()
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	const queryFormRef = ref() // 搜索的表单

	/** 查询部门列表 */
	const getList = async () => {
		let tmp: string[] = queryParams.dateScope || []
		queryParams.dateScope = ''
		if (tmp.length == 2) {
			let startDate = tmp[0] || ''
			let endDate = tmp[1] || ''
			let dateScope = startDate + ' - ' + endDate
			queryParams.dateScope = dateScope
		}
		loading.value = true
		const data = await geMeterRecharges(queryParams)
		queryParams.dateScope = tmp
		list.value = data.msg
		loading.value = false
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		getList()
	}
</script>
